<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>账户编辑</span>
            </div>
          </template>
          <el-form label-width="90px">
            <el-form-item label="用户名："> {{ form.username }}</el-form-item>
            <el-form-item label="旧密码：">
              <el-input type="password" v-model="form.oldPwd"></el-input>
            </el-form-item>
            <el-form-item label="新密码：">
              <el-input type="password" v-model="form.newPwd"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>系统设置</span>
            </div>
          </template>
          <el-form label-width="90px">
            <el-form-item label="资源路径：">
              <el-input v-model="sysform.resourceUrl"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSys">保存</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup lang="ts" name="user">
import {reactive, ref} from 'vue';
import VueCropper from 'vue-cropperjs';
// import 'cropperjs/dist/cropper.css';
// import avatar from '../assets/img/img.jpg';
import user from "../api/user";
import sys from "../api/sys";
import image from "../api/image";
import {ElMessage} from "element-plus";
import {md5} from "js-md5";

const form = ref({
  username: localStorage.getItem('ms_username'),
  oldPwd: '',
  newPwd: '',
});

const sysform = ref({
});
const getSysSetting = () => {
  sys.selectSetting([], (res) => {
    if (res.code === 200) {
      sysform.value = res.data;
    }
  });
}
const saveSys = ()=>{
  sys.save(
      sysform.value,
      (res) => {
        if (res.code === 200) {
          ElMessage.success('修改成功！');
        } else {
          ElMessage.error('修改失败！');
        }
      }
  );
}
getSysSetting();

const onSubmit = () => {
  user.modifyPassword(
      {
        username: localStorage.getItem('ms_username'),
        oldPwd: md5(form.value.oldPwd),
        newPwd: md5(form.value.newPwd),
      },
      (res) => {
        if (res.code === 200) {
          ElMessage.success('修改成功！');

        } else {
          ElMessage.error('修改失败！');
        }
      }
  );
};

</script>

<style scoped>
.info {
  text-align: center;
  padding: 35px 0;
}

.info-image {
  position: relative;
  margin: auto;
  width: 100px;
  height: 100px;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 50px;
  overflow: hidden;
}

.info-edit {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.info-edit i {
  color: #eee;
  font-size: 25px;
}

.info-image:hover .info-edit {
  opacity: 1;
}

.info-name {
  margin: 15px 0 10px;
  font-size: 24px;
  font-weight: 500;
  color: #262626;
}

.crop-demo-btn {
  position: relative;
}

.crop-input {
  position: absolute;
  width: 100px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
</style>
